<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="product.css">
</head>
<body>
<div class="container-fluid" style="background-color: #F2F2F2">
    <div class="row a">
        <div class="col-md-2"></div>
        <div class="col-md-1"><img src="logo.png"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-3" style="margin-top: 30px">
            <div class="top-header">
                <ul><span class="phone">090 - 223 44 66</span></ul>
                <ul><span class="glyphicon glyphicon-envelope"><a href="">  help@trendd.com</a></span></ul>
            </div>
            <div style="clear: both"></div>
            <div class="top-middle">
                <div>
                    <ul><a href="" style="border-right:3px white solid;padding-right: 20px"><img src="img/shop2.svg"
                                                                                                 alt=""
                                                                                                 style="width: 30px;margin-top: 0px;"></a>
                    </ul>
                </div>
                <div>
                    <ul style="padding-left: 15px;margin-top: 2px"><a href="" style="color: #9B0909;font-weight:bold;">LOGIN</a>
                    </ul>
                </div>
                <div>
                    <bottom type="button" class="btn btn-danger">REGISTER</bottom>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row b">
        <div class="col-md-2"></div>
        <div class="b-user col-md-8 ">
            <ul><h4><a href="">PRODUCTS </a></h4></ul>
            <ul><h4><a href="">CAMPAINGS</a></h4></ul>
            <ul><h4><a href="">SERVICES</a></h4></ul>
            <ul><h4><a href="">BRANDS</a></h4></ul>
            <ul><h4><a href="">BRANDS</a></h4></ul>
            <ul><input type="text" class="form-control" placeholder="Search" style="border-radius: 20px;">
                <a href=""><img src="img/search.svg" alt="" style="margin-left: 170px;margin-top: -54px"></a></ul>
        </div>
    </div>
    <div class="row c">
        <div class="col-md-2"></div>
        <div class="col-md-1 c-filted">
            <a href="" style="color: white"><h4>FILTER</h4></a>
        </div>
        <div class="col-md-7"></div>
        <div class="col-md-2"></div>
    </div>
    <div class="row d">
        <div class="col-md-2"></div>
        <div class="col-md-8 d-photo">
            <div class="row">
                <div class="col-md-3">
                    <h3 style="font-weight: bolder">BRANDS</h3>
                    <ul class="d-ul list-unstyled" style="border-right:1px solid #5cb85c ;height: 200px">
                        <li><a href="">new</a></li>
                        <li><a href="">add</a></li>
                        <li><a href="">balance</a></li>
                        <li><a href="">puma</a></li>
                    </ul>
                    <ul class="d-ul list-unstyled">
                        <li><a href="">tiger</a></li>
                        <li><a href="">cat</a></li>
                        <li><a href="">docat</a></li>
                        <li><a href="">nibi</a></li>
                    </ul>
                </div>
                <div class="col-md-6 ">
                    <div class="row">
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>WOMAN</h2>
                                <a href=""><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/img-w.jpg" alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href=""><img src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                                   alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>MAN</h2>

                                <a href=""><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/man-r-img.jpg" alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href=""><img src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                                   alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>KIDS</h2>
                                <a href=""><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/kid-r-img.jpg" alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href=""><img src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                                   alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <img class="d-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2996810576,291798969&fm=26&gp=0.jpg" style="padding-top: 20px" alt="">
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row e">
        <div class="col-md-2"></div>
        <div class="col-md-8" style="background-color: white;">
            <div>
                <div class="e-top1">
                    <h3>SPECIAL <span style="color: red">PRODUCTS</span></h3>
                </div>
                <div class="e-top2">
                    ▶<a href=""> view all products</a>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="row e-shopping">
                <div class="col-md-3">
                    <div>
                        <a href=""><img src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/p1.jpg" alt=""></a>
                        <h4><a href="">Nike Roshe Run</a></h4>
                        <a href="" class="e-a">
                            <span>109.90$  </span>
                            <small>GET NOW</small>
                            <label>></label>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <footer class="footer">
        <div class="w font_family">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5 class="service_img1"></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="service_img2"></h5>
                        <div class="service_txt">
                            <h4>极速物流</h4>
                            <p>极速发货，极速配送</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="service_img3"></h5>
                        <div class="service_txt">
                            <h4>无忧售后</h4>
                            <p>七天无理由退换货</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="mod_help font_family">
            <dl>
                <dt>服务指南</dt>
                <dd>会员特权</dd>
                <dd>生活旅行</dd>
                <dd>团购</dd>
                <dd>客服咨询</dd>
            </dl>
            <dl>
                <dt>支付服务</dt>
                <dd>货到付款</dd>
                <dd>在线支付</dd>
                <dd>分期付款</dd>
                <dd>邮局汇款</dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd>售后无忧</dd>
                <dd>价格保护</dd>
                <dd>极速退款</dd>
                <dd>极速换货</dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd>DIY商品</dd>
                <dd>延保服务</dd>
                <dd>火云鞋神E卡</dd>
                <dd>火云鞋神通信</dd>
            </dl>
            <dl class="last">
                <dt>我们的二维码</dt>
                <dd>
                    <img src="img/qrcode.png" height="90" width="90"/><br/>
                    火云鞋神客户端
                </dd>
            </dl>
        </div>
    </footer>
</div>
</body>
</html>